<template>
    <div id="create_user_role">
        <el-dialog
        :title="type =='add' ? '添加角色' : '编辑角色'"
        :visible.sync="dialogVisible"
        class=''
        top="10vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >   
            <template v-if="type == 'add'">
                <div class="content_box" >
                    <el-form v-model= "formData" label-width="80px" label-position="left">
                        <el-form-item label="用户昵称:">
                            <el-input size="small" v-model="userInfo.personName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="选则角色:">
                            <el-select size="small" v-model="formData.roleId" placeholder="请选择用户角色" filterable clearable>
                                <el-option
                                    v-for="item in rolesList"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId+ ',' +item.isAssignGroup">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择分组:" v-if="formData.roleId !='' && formData.roleId.split(',')[1] == 1">
                            <groupForUser @changeGroups= "changeGroups" :type="type" :groupsp="groups"></groupForUser>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="handleClose">取 消</el-button>
                    <el-button size="small" type="primary" @click="handleSubmit">提交保存</el-button>
                </span>
            </template>

            <!-- 角色权限编辑 -->
            <template v-if="type == 'edit'">
                <div class="content_box" >
                    <el-form v-model= "formData" label-width="100px" label-position="left">
                        <el-form-item label="用户昵称:">
                            <el-input size="small" v-model="userInfo.personName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="角色名称:">
                            <el-radio-group v-model="itemIndex" size="small" @change="handleChangeRoleButton">
                                <el-radio-button :label="index"  v-for="(item, index) in detailsData " :key="index" :value="index">{{item.roleName}}</el-radio-button>   
                            </el-radio-group>
                            <template>
                                <el-form-item>
                                    <el-select size="small" v-model="formData.roleId" placeholder="请选择用户角色" filterable clearable>
                                        <el-option
                                            v-for="item in rolesList"
                                            :key="item.roleId"
                                            :label="item.roleName"
                                            :value="item.roleId +',' + item.isAssignGroup">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item >
                                    <groupForUser v-if="detailsData[itemIndex] && detailsData[itemIndex].isAssignGroup == 1" @changeGroups= "changeGroups" :type="type" :groupsp="groups"></groupForUser>
                                </el-form-item>
                            </template>
                        </el-form-item>
                        
                        <!-- <section v-if="detailsData" >
                            <div v-for="(item, index) in detailsData" :key="index" style="margin-bottom: 20px; ">
                                <el-form-item :label="'用户角色' + (index+1)+ ':'">
                                    <el-select size="small" v-model="item.roleId" placeholder="请选择用户角色" filterable clearable>
                                        <el-option
                                            v-for="item in rolesList"
                                            :key="item.roleId"
                                            :label="item.roleName"
                                            :value="item.roleId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="用户分组:">
                                    <groupForUser :groupsp="item.groups" :type="type" :index="index" @changeItemGroups= "changeItemGroups"></groupForUser>
                                </el-form-item>
                                <el-form-item >
                                    <el-button  type="primary" size="mini" @click="handleClickDel(item)">删 除</el-button>
                                    <el-button  type="primary" size="mini" @click="handleSubmitItem(item, index)">提 交</el-button>
                                    <div style="border-bottom: 2px solid red; "></div>
                                </el-form-item>
                            </div>
                        </section> -->
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="handleClose">取 消</el-button>
                    <el-button size="small" @click="handleClickDel">删 除</el-button>

                    <el-button size="small" type="primary" @click="handleSubmit">提交保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
    import groupForUser from './groupForUser'
    export default {
        props: ['userInfo', 'isShowRole', 'type'],
        components: {groupForUser},
        computed: {
            dialogVisible: {
                get() {
                    return this.isShowRole;
                },
                set() {}
            }
        },
        data() {
            return {
                formData: {
                    roleId: ''
                },
                rolesList: [],
                groupsList: [],
                groupIds: [],
                groups: [],
                detailsData: [],
                itemIndex: 0
            }
        },
        mounted() {
            this.getRolesList()
            this.getGroupsList()
            if(this.type == 'edit') {
                this.getUserGroupRoleDetailsV2()
            }
        },
        methods: {
            /**获取用户角色信息 */
            getUserGroupRoleDetailsV2() {
                this.$server.systemControlApi.getUserGroupRoleDetailsV2(this.userInfo.userId).then(res => {
                    this.detailsData= res.data
                    if(this.detailsData.length > 0) {
                        this.formData.roleId= this.detailsData[this.itemIndex].roleId + ',' +this.detailsData[this.itemIndex].isAssignGroup
                        if(this.detailsData[this.itemIndex].isAssignGroup == 1) {

                            this.groups= this.detailsData[this.itemIndex].groups
                        }else{
                            this.groups= []
                        }
                    }
                })
            },
            getGroupsList() {
                this.$server.systemControlApi.getSystemGroupsList().then( res => {
                    this.groupsList= res.data
                })
            },
            getRolesList() {
                try{
                    let params= {
                        page: 1,
                        size: 10000
                    }
                    this.$server.systemControlApi.getSystemRoleList(params).then(res => {
                        this.rolesList= res.data
                    })
                }catch(err){this.$paramsError(err)}
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
            changeGroups(val) {
                console.log(val, 'grval')
                this.groups= val
            },
            changeItemGroups(val) {
                this.detailsData[val.index].groups= val.val
            },
            /**添加角色 */
            handleSubmit() {
                let params= {
                    roleId: +this.formData.roleId.split(',')[0],
                    userId: this.userInfo.userId,
                    groups: this.groups
                }
                this.$confirm('是否确定提交？').then(_ => {

                    this.$server.systemControlApi.addGroupRoleForUser(params).then(res => {
                        if(this.type == 'add') {
                            this.$emit('cancelShow', false)
                        }else{
                            this.getUserGroupRoleDetailsV2()
                        }
                    })
                }).catch()
            },

            /** */
            handleSubmitItem(item, index) {
                let params= {
                    roleId: item.roleId,
                    userId: this.userInfo.userId,
                    groups: item.groups
                }
                this.$confirm('确定修改？').then(_ => {
                    this.$server.systemControlApi.addGroupRoleForUser(params).then(res => {
                        this.getUserGroupRoleDetailsV2()
                    })
                }).catch()
            },
            /**删除用户角色 */
            handleClickDel() {

                let params= {
                    roleId: this.detailsData[itemIndex].roleId,
                    userId: this.userInfo.userId
                }
                this.$confirm('确定删除？').then(_ => {
                    this.$server.systemControlApi.deleteUserGroup(params).then(res => {
                        this.$message({
                            message: res.message,
                            type: 'success',
                            duration: 1500
                        })
                        this.getUserGroupRoleDetailsV2()
                    })
                }).catch()
            },
            handleChangeRoleButton(val) {
                this.formData.roleId= this.detailsData[val].roleId + ',' +this.detailsData[val].isAssignGroup
                if(this.detailsData[val].isAssignGroup == 1) {
                    this.groups= this.detailsData[val].groups
                }else{
                     this.groups= []
                }
                
            }
        }
    }
</script>